<template>
  <div>
    <div class="search">
      <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
        <el-form-item label="类别名称">
          <el-input
            v-model="queryParams.type_name"
            placeholder="请输入类别名称"
            clearable
            size="small"
            style="width: 240px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle">
      <!-- 按钮 -->
      <div>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="dialogVisible = true"
        >新增</el-button>
      </div>
      <!-- 表格 -->
      <div class="tab">
        <el-table
          v-loading="loading"
          border
          :data="dataList"
          style="width: 100%;cursor: pointer;"
          size="medium"
          :header-cell-style="{background:'#f8f8f9',color:'#515a6e',fontWeight: 'bold'}"
        >
          <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
          <el-table-column prop="type_name" label="类别名" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="type_time" label="创建时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="onUpdate(row)">修改</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="ondelete(row)">
                <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination
          class="pagination-container"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.current"
          :page-sizes="[4, 6, 8]"
          :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 对话框 -->
    <el-dialog
      title="类别信息"
      :visible.sync="dialogVisible"
      width="25%"
      top="5%"
      :before-close="cancel"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="类别名称" prop="type_name">
          <el-input  clearable placeholder="请输入名称" v-model="form.type_name"></el-input>
        </el-form-item>

        <el-form-item label="当前时间" prop="pass">
          <el-date-picker
          style="width:100%;"
            disabled
            type="date"
            v-model="form.type_time"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="onUser">立即创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  galleryTypeList,
  dl_GalleryType,
  add_GalleryType,
  up_GalleryType
} from "@/api/gallery/api";
import { getDate } from "@/utils/date";

export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      queryParams: {
        size: 6,
        current: 1,
        type_name: ""
      },
      total: 0,
      dataList: [],
      form: {
        id: "",
        type_name: "",
        type_time: getDate()
      },
      rules: {
        type_name: [
          { required: true, message: "请输入类别名称", trigger: "blur" },
          { min: 2, message: "长度大于两位", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      galleryTypeList(this.queryParams).then(res => {
        let data = res.data;
        this.dataList = data.dataList;
        this.total = data.total;
        this.loading = false;
      });
    },
    onReset() {
      this.queryParams.type_name = "";
      this.getList();
    },
    // 删除
    ondelete({ id }) {
      let query = {
        id
      };
      dl_GalleryType(query).then(res => {
        let data = res.data;
        if (data == "ok") {
          this.getList();
          this.$message.success("删除成功！！！");
        }
      });
    },

    // 取消
    cancel() {
      this.dialogVisible = false;
      this.resetForm();
    },
    // 清空表单数据
    resetForm() {
      this.form = {
        id: "",
        type_name: "",
        type_time: getDate()
      };
    },
    // 添加或修改类别
    onUser() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.form.id == "") {
            add_GalleryType(this.form).then(res => {
              let data = res.data;
              if (data == "ok") {
                this.resetForm();
                this.$message.success("添加成功！！！");
                this.dialogVisible = false;
                this.getList();
              }
            });
          } else if (this.form.id > 0) {
            up_GalleryType(this.form).then(res => {
              let data = res.data;
              if (data == "ok") {
                this.resetForm();
                this.$message.success("修改成功！！！");
                this.dialogVisible = false;
                this.getList();
              }
            });
          }
        } else {
          return false;
        }
      });
      //
    },
    onUpdate(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },

    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    }
  }
};
</script>
<style>
.el-table--border .el-table__cell {
  border: none;
}
</style>
<style scoped>
.middle {
  background: #fff;
  margin: 0 15px;
}
.middle > div {
  padding: 20px 20px 10px 20px;
}
.search {
  margin: 10px 15px 0 15px;
}
.paging {
  display: flex;
  justify-content: end;
}
.pagination-container {
  margin-left: auto;
  margin-bottom: 20px;
}
</style>